<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* #left{
				background: url(img/u=2727367258,3781628836&fm=26&gp=0.jpg);
				width: 300px;
				height: 150px;
			} */
			#centent {
				/* background: url(img/下载.jpg); */
				width: 300px;
				height: 150px;
				position: absolute;
				left: 600px;
				top: 100px;
				overflow: hidden;
			}

			img {
				width: 300px;
				height: 150px;
				position: absolute;
				/* left: 200px;
				top: 100px; */
				/* display: inline-block; */
			}
		</style>
	</head>
	<body>
		<div id="centent"></div>
		<script src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			// var options = {
			// 	url:"https://test.shop.deepe.ren/api/groom/list/1",
			// 	data:{},
			// 	success:function(data){
			// 		console.log(data);
			// 	}
			// };
			// $.ajax(options);
			var a = [];
			$.get("https://test.shop.deepe.ren/api/groom/list/1","",function(data){
				var array_data = data.data.banner;
				console.log(array_data);
				for (var i = 0; i < array_data.length; i++) {
					a.push(array_data[i].img);
				}
				func();
			});
			console.log(a);
			// var a = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg'];
			var func = function(){
				var s = 0;
				$(function() {
					// $('#xt').on('click', function() {
					$.each(a, function(i,value) {
						$('#centent').append("<img src='" + value + "'/>")
					});
					$('img').each(function(i,item) {
						$(item).css({'left': s});
						s += 300;
					});
					setInterval(function(){
						$('img').each(function(i,item) {
						$(item).css("z-index","1");
						console.log(item);
						var t = $(item).css('left');
						console.log(t);
						if(t =="-600px"){
							$(item).css("z-index","0");
							$(item).animate({'left':'+=1200'},1000);	
						 }else{
							$(item).css("z-index","1");
							$(item).animate({'left':'-=300'},1000);
						};
						 
					});
					},2000);
				});
			};
			
		</script>
	</body>
</html>
